<template>
	<view class="box">
		<view class="statusBar" :style="{height:statusHeight}"></view>
		<map class="map" :longitude="longitude" :latitude="latitude" :markers="markers" include-points></map>
	</view>
</template>

<script>
	import amapFile from '../../libs/amap-wx.130.js'
	export default{
		data(){
			return{
				statusHeight:0,
				longitude:'104.070734',
				latitude:"30.575041",
				// 地图标记的数据 打点
				markers:[
					{
						id:1,
						latitude:30.575041,
						longitude:104.070734,
						iconPath:'../../static/img/location.png',
						// 标记点图片的宽高
						width:30,
						height:30
					},
				],
				
			}
		},
		onLoad(){
			var that = this;
			var myAmapFun = new amapFile.AMapWX({key:'26b9295dcaa80f8a723eb3560acb024e'});
			// myAmapFun.getPoiAround({
			//   success: function(data){
			// 	  //成功回调
			// 	  data.markers.forEach(function(item,index){
			// 		  that.markers.push(
			// 			  {
			// 			  		id:index+2,
			// 			  		latitude:item.latitude,
			// 			  		longitude:item.longitude,
			// 			  		iconPath:'../../static/img/location.png',
			// 			  		// 标记点图片的宽高
			// 			  		width:30,
			// 			  		height:30
			// 			  	},
			// 		  )
			// 	  })
				  // console.log(that.markers);
				
			//   },
			//   fail: function(info){
			//     //失败回调
			//     console.log(info)
			//   }
			// }),
			// 获取定位时 涉及优化 避免重复获取
			myAmapFun.getRegeo({
			      success: function(data){
			        //成功回调
					console.log(data[0])
					that.markers.push(
					  {
						id:that.markers.length+1,
						latitude:data[0].latitude,
						longitude:data[0].longitude,
						iconPath:'../../static/img/my.png',
						// 标记点图片的宽高
						width:30,
						height:30
					},
					)
			      },
			      fail: function(info){
			        //失败回调
			        console.log(info)
			      }
			    })
				// 获取设备信息 状态栏高度
				var info = uni.getSystemInfoSync();
				// console.log(info);
				this.statusHeight=info.statusBarHeight+'px';
		},
		
	}
</script>

<style lang="scss">
	.box{
		.statusBar{
			width: 100%;
			background-color: #fff;
		}
		.map{
			width: 750rpx;
			height: 1000rpx;
		}
	}
</style>